Core Web Vitals
Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標
LCP Largest Contentful Paint
ある時間内にページ内の最大面積を表示しきったかどうか
FCP First Contentful Paint
最初に
CSS
のあたった領域がでるまでの時間
First Input Delay
ページが入力に反応できるまでの時間
LPみたいな、入力ないサイトは？
ボタン入力とか計測するの？
Cumulative Layout Shift
ページが読み込まれ始めてから領域がずれた場合のズレ幅
よく
画像 Image
でずれがち
width 幅 css
,
height 高さ css
の指定がないこと多い
Responsive images
あたりで取り上げてる
SPA Single Page Application
のような長期間生きてるページにも適用
? チェックするツールは？
Tools to measure Core Web Vitals
表あり
Web Vitalの名前がついたツールがあるが、
Lighthouse Web
などの既存のツールに追加してもらうもの使うのが良さそう
GoogleChrome/web-vitals-extension: A Chrome extension to measure essential metrics for a healthy site
Browser Extension ブラウザ拡張機能
Tools to measure Core Web Vitals
Case Study: Improving Shopify Site Speed Can Increase Conversions
Web Vitalsの重要さの説明が分かりやすいので、使えそう
Core Web Vitals の指標のしきい値の定義
LCP Largest Contentful Paint
、
FID First Input Delay
、
CLS Cumulative Layout Shift
の説明が分かりやすい